<template lang="html">
	<div class="view">
		<!-- 头部 -->
		<SearchHeader/>
        <div class="pageNav">
        	<router-link to="/hotbang" tag="div">
	        	<div>
	        	   <img :src="hotTopic1">
	        	   #热门话题#
	        	</div>
            </router-link>
        	<div>
        	   <img :src="hotTopic2">
        	   #精华问答#
        	</div>
        	<div>
        	   <img :src="hotTopic3">
        	   #课程相关#
        	</div>
        </div>
        <!-- 聊天室 -->
        <div class="chat">
        	<div class="chat-logo">
        		聊天室
        	</div>
        </div>
        <!-- 列表 -->
        <div class="chat-list" v-for="(item,index) in getchatData" :key="index">
        	<div class="chat-list-userinfo">
        	   <img :src="username1">
        	   <div class="userinfo">
        	   	 <p class="username">{{item.username}}</p>
        	     <p class="chat-time">{{item.time}}</p>
        	   </div>  
        	   <div class="chat-content">
        	   	  <p>{{item.content}}</p> 
        	   </div>     
        	   <div class="chat-list-footer">
        	   	  <div class="chat-list-read">
        	   	  	{{item.count}}
        	   	  	<div class="comment-like">
        	   	  		<div class="commenticon">
        	   	  			<img :src="commentImg">
        	   	  		</div>
        	   	  		<div class="likeicon">
        	   	  			<img :src="likeImg">
        	   	  		</div>        	   	  		
        	   	  	</div>
        	   	  </div>
        	   </div> 	  
        	</div>
        </div>
        <!-- 加载更多 -->
        <div class="more" @click="getMoreHandler">
        	加载更多
        </div>
        <!-- 发布内容按钮 -->
        <div class="publish" @click="getcontentHandler">
        	<img :src="publishImg">
        	发布内容
        </div>
       	<!-- 发表动态框 -->
          <div class="in-dynamic" v-if="isShow">
        	<div class="dialog-wrap">
		      <div class="dialog-cover"  v-if="isShow" @click="closeMyself"></div>
		      <transition name="drop">
		        <div class="dialog-content"  v-if="isShow">
		          <div class="dialog-close" @click="closeMyself">
                       <img :src="jtImg">
		          </div>
		          <slot>
		          	发动态
		          	<div  class="in-dynamic-content">
		          		<input type="text" name="">
		          	</div>
		          	
		          	<div class="in-dynamic-footer">
		          		<img :src="photoImg">
		          		<div class="dynamic">
		          			发表
		          		</div>
		          	</div>
		          </slot>
		        </div>
		      </transition>
			</div>
        </div>
	</div>
</template>
<script>
	import SearchHeader from "../components/searchHeader.vue"
	export default{
		name:'viwes',
		data(){
			return{
				hotTopic1:require("../assets/img/view1.png"),
                hotTopic2:require("../assets/img/view2.png"),
                hotTopic3:require("../assets/img/view3.png"),
                username1:require("../assets/img/view-usericon1.png"),
                username2:require("../assets/img/view-usericon2.png"),
                username3:require("../assets/img/view-usericon3.png"),
                commentImg:require("../assets/icon/comment.png"),
                likeImg:require("../assets/icon/praise1.png"),
                publishImg:require("../assets/icon/published.png"),
                photoImg:require("../assets/icon/Photo-album.png"),
                jtImg:require("../assets/icon/arrow-top.png"),
                getchatData:[],
                isShow:false
			}
		},
		components:{
			SearchHeader
		},
		mounted(){
           this.getchatInfo()
		},
		methods:{
			getMoreHandler(){
				this.getchatInfo()
			},
			closeMyself () {
        		this.isShow = false	        
		    },
			getcontentHandler(event){
                this.isShow = true              
			},
			getchatInfo(){
				this.$axios.get(this.HOST + "/viewdata")
					.then(res => {
						var allData = this.getchatData.concat(res.data.data)
						this.getchatData = allData
					})
					.catch(error => {
						console.log(error)
					})
				}
			}
			
	}
</script>
<style lang="less" scoped>
	.view{
		.more{
			margin-bottom: 60px;
			height:50px;
			line-height: 50px;
			padding-left:10px;
		}
		.publish{
            position:fixed;
            bottom:65px;
            left:50%;
            margin-left: -50px;
			width:100px;
			padding:5px;
			border-radius: 12px;
			background-color: #fff;
			box-shadow:0px 0px 10px rgba(0,0,0,.2); 
			color:#3DB2FC;
			img{
				width:25px;
			}
		}
		.pageNav{
			padding:15px 20px;
			display:flex;
			justify-content: space-between;
			align-items: center;
			text-align: center;
			border-bottom: 1px solid #FEECDD;
			div{
				img{
				  width:100px;
				}
			}						
		}
		.chat{
			.chat-logo{
				width:80px;
				height:25px;
				line-height: 25px;
				background-color :#F98C32;
				color:#fff;
				text-align: center;
				margin-left:20px;
			}
		}	
		.chat-list:last-child{
			margin-bottom: 60px;
		};
		.chat-list{
			padding:15px 20px 10px 20px;
			border-bottom: 1px solid #ddd;
			.chat-list-userinfo{
				img{
					width:60px;
				}
				.userinfo{
				   width:80%;
				   float:right;
				   text-align: left;
				   .username{
                      font-size: 18px;
                      color:#000;
                      height:30px;
				   	  line-height: 30px;
				   }
				   .chat-time{
				   	  font-size: 14px;
				   	  height:30px;
				      line-height: 30px;
				   }
				}
				.chat-content{
					padding:10px 0;
				   	p{
				   		width:100%;
				   	}
				}
				.chat-list-footer{
					.chat-list-read{
						height:25px;
						line-height: 25px;
						font-size: 14px;
						color:#F98C32;
						.comment-like{
							float:right;
							width:100px;
							.commenticon{
								float:left;
								width:20px;
								margin-left: 25px;
								margin-right: 25px;
							}
							.likeicon{
								float:left;
								width:25px;
							}
						}
					}
				}
			}
		}
		.in-dynamic{
		    .dialog-wrap {
			    position: fixed;
			    width: 100%;
			    height: 100%;
			    .dialog-cover {
                    background-color:rgba(0,0,0,.2) ;
				    position: fixed;
				    z-index: 5;
				    top: 0;
				    left: 0;
				    width: 100%;
				    height: 100%;
			    }
		    }
		    .dialog-content {
			    width: 100%;
			    height:250px;
			    position: fixed;
			    background: #fff;
			    bottom:60px;
			    z-index: 10;
			    padding:10px 20px;
			    box-sizing: border-box;
			    .dialog-close {
			        position: absolute;
				    right: 10px;
				    top: 10px;
				    width: 30px;
				    height: 30px;
				    text-align: center;
                    img{
                    	transform: rotate(180deg)
                    }
			    }
			    .dialog-close:hover {
			        color: #4fc08d;
			    }
			    .in-dynamic-content{
			    	margin-top: 20px;
			    	height:150px;
			    	background-color: #F6F6F6;
			    	input{
			    		width:100%;
			    		height:100%;
			    		padding: 10px 10px;
			    	}
			    }
			    .in-dynamic-footer{
			    	padding:10px 0;
			    	img{
			    		width:25px;
			    	}	
			    	.dynamic{
			    		float:right;
			    		width:50px;
			    		padding:2px 5px;
			    		text-align: center;
			    		border-radius: 10px;
			    		background-color: #F6F6F6;
			    	}
			    }
		    }
		    
		}
        
	}
</style>